<!-- 动态表单设置组件 -->
<template>
  <div class="setUpForm" id="setUpForm">
    <div class="center">
      <a-tabs
        lazy-load
        @change="(e)=>changeTabs(e as string)"
        position="left"
        type="text"
        style="height: 100%"
      >
        <a-tab-pane
          style="border-radius: 15px"
          v-for="item in setUpData"
          :key="item.subCode"
          :title="item?.cnName"
        >
          <template #title>
            <div class="title" v-if="!item?.isEdit">
              {{ item?.cnName }}
            </div>
            <div class="title" v-else>
              <a-input
                @blur="blur(item)"
                v-model="item.cnName"
                allow-clear
                style="width: 150px"
              />
            </div>
          </template>
          <CenterConfig
            @choiceComponent="choiceComponent"
            :choiceUuid="(componentObj.data.uuid as string)"
            v-model:setUpList="item.componentList"
            :layout="layout"
            :businessType="businessType"
            :updata="upData"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { isJSON } from '@/utils/isType';
import { useSetupFormStore } from '@/store';
import LeftConfig from './components/LeftConfig/index.vue';
import CenterConfig from './components/CenterConfig/previewCenter.vue';
import clonedeep from 'lodash.clonedeep';
import RightDrawer from './components/RightDrawer/index.vue';
import * as config from '../setupConfig';
// import { Control } from '@/api/control/type';
import { tabList, componentList } from '../setupConfig';

const store = useSetupFormStore();
const props = withDefaults(
  //参数说明
  defineProps<{
    layout: string; //a-form的layout属性
    businessType?: string | string[];
    setUpData?: any[]; // 控件数据
    optionData?: any;
  }>(),
  {}
);

const centerData = reactive<{ data: any }>({ data: [] });
const tabCode = ref('baseComponent');

const emit = defineEmits(['update:layout', 'changeSecondsPreview']);

const Edit = (item: any) => {
  item.isEdit = true;
};

watch(
  () => props.setUpData,
  (val) => {
    centerData.data = props.setUpData;
  }
);

// 处理显示的控件数据
const showCenterData = computed(() => {
  if (centerData?.data?.length !== 0) {
    const newArr = centerData?.data?.find(
      (ele: any) => ele.code === tabCode.value
    )?.componentList;
    if (newArr) {
      subCode.value = newArr[0]?.code;
      return newArr;
    } else {
      return centerData?.data;
    }
  } else {
    return [];
  }
});

// 左侧列表
const tablist: any = ref([]);

const subCode = ref('');

//组件设置的参数
const componentObj = reactive<{ data: any }>({ data: {} });
const rightDrawer = ref(); //获取rightDrawer元素
//点击组件被选中时
const choiceComponent = (element: any) => {
  componentObj.data = element;
  rightDrawer.value.visible = true;
};
</script>

<style lang="less" scoped>
.setUpForm {
  // position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  background: rgb(243, 243, 243);
  height: 100%;
  flex: 1;
  .left {
    flex: 1;
    height: 100%;
  }
  .center {
    flex: 2;
    height: 100%;
    margin: 0 16px;
  }
  .right {
    overflow: auto;
    // background: #fff;
    flex: 1;
    height: 100%;
    position: relative;
    max-width: 350px;
  }
}
.title {
  width: 100%;
  // background-color: #fff;
  // height: 50px;
  // width: 150px;
}
:deep(.arco-tabs-content) {
  background-color: #fff;
}
:deep(.arco-tabs-content-list) {
  height: 100%;
}
:deep(.arco-tabs-pane) {
  height: 100%;
}
:deep(.arco-tabs-content) {
  border-radius: 15px;
}
</style>
